 <template>
    <el-dialog
    title="自定义菜单"
    :visible.sync="transfer"
    width="60%"
    class="class_c"
    center>
    <div>
      <template>
        <div style="width:100%;height: 300px;margin: auto;padding: 0%;">            
              <div class="left_three" v-for="(item,index1) in routeMenu" :key="index1">
                  <div @click="getIcom(item,index1)">
                    <svg-icon  :icon-class="item.icon"></svg-icon>
                  </div>
                  <div>{{item.title}}</div>
              </div>                        
        </div>
        <div style="width:100%" class="ax_default line">
          <img style="width:100%" src="@/assets/images/u39.svg" alt="">
        </div>
        <div style="width:100%;height: 150px;margin: auto;padding: 0%;">            
          <div class="left_three" v-for="(item,index) in menuList" :key="index">
              <div @click="deleteIcom(item,index1)">
                <svg-icon  :icon-class="item.icon"></svg-icon>
              </div>
              <div>{{item.title}}</div>
          </div>                        
        </div>
        <div class="select-btn-group">
          <el-button type="primary" size="medium"  @click="onSubmit">确认</el-button>
        </div>
      </template>
    </div>
  </el-dialog>
</template>
 
<script>
import * as api from '@/api/baseDate'
export default {
  
  name: "transferComponent",
  props: {
    routeMenu: {
      type: Array,
      default () {
        return []
      }
    },
    menuList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data() {  
      return {
        transfer:false
      };
    },
  created(){
  },
  methods: {
    getIcom(parm,index){
      if(this.menuList.length<5){
        var item=this.routeMenu.splice(index, 1);
        var _this = this;
        _this.menuList.push(item[0])  
      }else{
        this.$alert("已超过菜单数量限制！",'提示', {
          confirmButtonText: '确定'
        });
      }       
    },
    deleteIcom(parm,index){
      var item=this.menuList.splice(index, 1);
      var _this = this;
      _this.routeMenu.push(item[0])         
    },
    onSubmit(){
      var data={
        userCode: Cookies.get("userCode"),
        userShortcutList:this.menuList
      }
      api.updateUserShourt(data).then(res => {
          if(res.data.resultCode == '0000'){
            this.$emit('getMenu',this.menuList)
          }else{
            this.$alert(res.data.resultMsg,'提示', {
              confirmButtonText: '确定'
            });
          }
        })     
      } 
    }
  };
</script>
<style lang="scss" scoped>
/deep/.el-dialog--center .el-dialog__body{
  padding:0%;
}
</style>
<style lang="less" scoped>
  .left_three{
    float: left;
    width: 150px;
    height: 80px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;

}
.svg-icon{
  width: 3.8em;
  height: 3.8em;
  color:#60bfeb;
}
</style>